<template>
	<div class="personnelList billShopList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>账单结算</el-breadcrumb-item>
			<el-breadcrumb-item>商户订单支付查询</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="tableMaxBox">
				<div class="py_5 px_10">
					<el-row>
						<el-col :span="2">
							<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
						</el-col>
						<el-col :span="22">
							<el-form :inline="true" :model="ruleForm" class="form-inline mt_10" @keyup.enter.native="shearchBtn()">
								<el-form-item>
									<el-input size="mini" class="w_160" v-model="s_sn" placeholder="支付记录编号"></el-input>
								</el-form-item>
								<el-form-item>
									<el-input size="mini" class="w_160" v-model="s_demand_sn" placeholder="订单编号"></el-input>
								</el-form-item>
								<el-form-item>
									<el-input size="mini" class="w_160" v-model="s_task_sn" placeholder="任务编号"></el-input>
								</el-form-item>
								<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
								<el-form-item>
									<el-select class="w_110" v-model="city_val" placeholder="请选择城市" @change="changeCity">
										<el-option
											v-for="item in cityList"
											:key="item.id"
											:label="item.name"
											:value="`${item.id}|${item.name}`"
										></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-select v-model="s_area_arr" multiple collapse-tags placeholder="商圈">
										<el-button
											size="mini"
											type="primary"
											class="round-right all-area"
											@click="selectAllArea()"
											native-type="button"
											>{{ areaStatus ? '全选' : '取消全选' }}</el-button
										>
										<el-option
											v-for="item in areaList"
											:key="item.id"
											:label="item.area_name"
											:value="`${item.id}|${item.area_name}`"
										></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-autocomplete
										size="mini"
										class="w_190"
										v-model="shop_name"
										:fetch-suggestions="querySearch"
										placeholder="店铺名称"
										:trigger-on-focus="true"
										@select="handleSelect"
									></el-autocomplete>
								</el-form-item>
								<el-form-item>
									<el-select size="mini" class="w_80" v-model="s_trade_type" placeholder="交易类型" clearable>
										<el-option label="支付" value="1"></el-option>
										<el-option label="退款" value="2"></el-option>
									</el-select>
								</el-form-item>

								<el-form-item>
									<el-select size="mini" class="w_120" v-model="s_mode" placeholder="支付方式" clearable>
										<el-option label="微信" value="1"></el-option>
										<el-option label="余额" value="2"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-select size="mini" class="w_120" v-model="s_status" placeholder="支付状态" clearable>
										<el-option label="支付成功" value="1"></el-option>
										<el-option label="支付失败" value="5"></el-option>
										<el-option label="退款中" value="2"></el-option>
										<el-option label="退款成功" value="3"></el-option>
										<el-option label="退款失败" value="4"></el-option>
									</el-select>
								</el-form-item>

								<el-form-item prop="datetime1">
									<el-date-picker
										size="mini"
										class="w_180i"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										format="yyyy-MM-dd HH:mm:ss"
										default-time="00:00:00"
										placeholder="操作开始时间"
										v-model="ruleForm.date1"
									></el-date-picker> </el-form-item
								>~
								<el-form-item prop="datetime2">
									<el-date-picker
										size="mini"
										class="w_180i"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										format="yyyy-MM-dd HH:mm:ss"
										default-time="23:59:59"
										placeholder="操作结束时间"
										v-model="ruleForm.date2"
									></el-date-picker>
								</el-form-item>
								<el-button size="mini" type="primary" class="round-right" @click="shearchBtn" native-type="button"
									>搜索</el-button
								>
								<el-button size="mini" round @click="resetBtn">重置</el-button>
							</el-form>
						</el-col>
					</el-row>
				</div>
				<template>
					<el-table :data="demandList" stripe>
						<el-table-column type="index" prop="id" label="序号" width="60"></el-table-column>
						<el-table-column prop="sn" label="支付记录编号" width="150">
							<template slot-scope="{ row }">
								<span>{{ row.sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="transaction_id" label="支付订单号" width="160">
							<template slot-scope="{ row }">
								<span>{{ row.transaction_id }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="sn" label="关联订单" width="160">
							<template slot-scope="{ row }">
								<span>{{ row.demand_sn_all_arr[0] }}</span>
								<span v-if="row.demand_sn_all_arr.length > 1">等{{ row.demand_sn_all_arr.length }}个</span>
							</template>
						</el-table-column>
						<el-table-column prop="sn" label="关联任务" width="160">
							<template slot-scope="{ row }">
								<span>{{ row.task_sn_arr[0] }}</span>
								<span v-if="row.task_sn_arr.length > 1">等{{ row.task_sn_arr.length }}个</span>
							</template>
						</el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" width="200">
							<template slot-scope="{ row }">
								<span>{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="agent_name" label="代理商" width="110"></el-table-column>
						<el-table-column prop="city_name" label="城市" width="80"></el-table-column>
						<el-table-column prop="area_name" label="商圈" width="80">
							<template slot-scope="{ row }">
								<span>{{ row.area_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="total_amount" label="金额（元）" width="100">
							<template slot-scope="{ row }">
								<span>{{ row.total_amount | filterNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="trade_type" label="交易类型" width="100">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.trade_type == 1">支付</span>
								<span class="text-danger" v-if="row.trade_type == 2">退款</span>
							</template>
						</el-table-column>
						<el-table-column prop="mode" label="支付方式" width="100">
							<template slot-scope="{ row }">
								<span class="text-warning" v-if="row.mode == 1">微信</span>
								<span class="text-primary" v-if="row.mode == 2">余额</span>
							</template>
						</el-table-column>
						<el-table-column prop="pay_status" label="支付状态" width="100">
							<template slot-scope="{ row }">
								<span>{{ row.pay_status }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="refund_id" label="退款记录编号" width="140">
							<template slot-scope="{ row }">
								<span>{{ row.refund_id }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="备注" width="150"></el-table-column>
						<el-table-column prop="add_time" label="操作时间" width="150"></el-table-column>
						<el-table-column prop="creater_name" label="操作人" width="100"></el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
import { staffConfirmy, staffBatchPay, staffRestartCreate, staffPay, removeOrder } from '@/api/bill'
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import { fetchAreaList, fetchOrderTradeList, fetchShopList } from '@/api/shop.js'
import { fetchCityList } from '@/api/city.js'
export default {
	name: 'BillList',
	data() {
		return {
			id: '',
			ids: '',
			index: '',
			sn: '',
			message: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			s_sn: '',
			s_demand_sn: '',
			s_task_sn: '',
			s_trade_type: '',
			s_mode: '',
			s_status: '',
			s_area_arr: '', //商圈信息
			s_area_id: '',
			s_area_name: '',
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			// s_type: '',
			// s_status: '',
			// s_time_type: '1',
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},
			shopList: [], //店铺列表
			cityList: [], //城市列表
			city_arr: '',
			city_id: '',
			city_name: '',
			city_val: '',
			demandList: [], //人才账单列表
			multipleSelection: [], //选中的序号集合
			areaList: [], //区域列表
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,
			areaStatus: true,
			agent_id: '',
			agent_reset: 0
		}
	},
	// computed: {
	// 	city_value() {
	// 		return this.city_val
	// 	}
	// },
	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			this.listShop()
		}
		// 城市改变
		// city_value(newVal, oldVal) {
		// if (oldVal) {
		// 	let [id, name] = oldVal.split('|')
		// 	if (id === '北京') {
		// 		id = 1
		// 	}
		// 	// 存储旧的商圈数据
		// 	this.selectedAreasMap[`city-${id}`] = this.s_area_arr
		// }
		// console.log('存储值', this.selectedAreasMap)
		// if (newVal && this.city_id) {
		// 	this.fetchAreaList(this.city_id) //商圈列表
		// 	this.listUser(this.city_id) //店铺列表
		// }
		// }
	},
	created() {
		this.ruleForm.date1 = this.date(0) + ' 00:00:00'
		this.ruleForm.date2 = this.date(0) + ' 23:59:59'
		// this.selectedAreasMap = {}
		if (this.$route.query.logic_sn) {
			this.s_sn = this.$route.query.logic_sn
			this.ruleForm.date1 = ''
			this.ruleForm.date2 = ''
		}
	},
	mounted() {},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		async listShop() {
			//获取列表
			try {
				let s_departmentIds_Arr = new Array()
				this.s_area_arr.forEach(element => {
					let [id, name] = element.split('|') // es6 数组解构赋值
					s_departmentIds_Arr.push(id.toString())
				})
				let ret = await fetchOrderTradeList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					sn: this.s_sn,
					city_id: this.city_id,
					area_id: '' + s_departmentIds_Arr,
					shop_id: this.shop_id,
					demand_sn: this.s_demand_sn,
					task_sn: this.s_task_sn,
					start_time: this.ruleForm.date1,
					end_time: this.ruleForm.date2,
					trade_type: this.s_trade_type,
					mode: this.s_mode,
					pay_status: this.s_status,
					agent_id: this.agent_id
				})

				ret.list.forEach(item => {
					item.demand_sn_all_arr = item.demand_sn_all.split(',')
					item.task_sn_arr = item.task_sn.split(',')
				})

				this.demandList = ret.list
				this.total = ret.count
			} catch (err) {
				console.log(err)
			}
		},
		async listUser() {
			try {
				let ret = await fetchShopList({
					sign_status: 30, //已合作的店铺
					status: 1, //启用的店铺
					city_id: this.city_id,
					agent_id: this.agent_id
				})
				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.name
					})
					this.shopList = ret.list
				} else {
					this.shopList = []
				}
			} catch (err) {
				console.log(err)
			}
		},
		// 监听城市val变化
		changeCity() {
			let [id, name] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name

			this.shop_name = ''
			this.shop_id = ''

			this.fetchAreaList() //商圈列表
			this.listUser() //店铺列表
		},
		//获取商圈列表
		fetchAreaList() {
			this.s_area_arr = []
			let fn = new FormData()
			fn.append('city_id', this.city_id)
			fn.append('agent_id', this.agent_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							// if (this.s_area_arr == '' || this.s_area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷') {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.s_area_arr.push(pusharr)
							// 		}
							// 	})
							// }
							// if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
							// 	this.s_area_arr = this.selectedAreasMap[`city-${city_id}`]
							// }
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},
		//重置
		async resetBtn() {
			this.resetData() //重置请求数据
		},
		//重置请求数据
		resetData() {
			this.pageNum = 1
			this.s_sn = ''
			this.s_demand_sn = ''
			this.s_task_sn = ''
			this.s_trade_type = ''
			this.s_mode = ''
			this.s_status = ''
			this.ruleForm.date1 = this.date(0) + ' 00:00:00'
			this.ruleForm.date2 = this.date(0) + ' 23:59:59'
			this.agent_reset += 1
		},
		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},
		//列表-导出
		downloadOrder() {
			let s_departmentIds_Arr = new Array()
			this.s_area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})
			let obj = {
				export: 1,
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				sn: this.s_sn,
				city_id: this.city_id,
				area_id: '' + s_departmentIds_Arr,
				shop_id: this.shop_id,
				demand_sn: this.s_demand_sn,
				task_sn: this.s_task_sn,
				start_time: this.ruleForm.date1,
				end_time: this.ruleForm.date2,
				trade_type: this.s_trade_type,
				mode: this.s_mode,
				pay_status: this.s_status,
				agent_id: this.agent_id
			}
			let param = $.param(obj)
			console.log(obj)
			window.location.href = this.url + '/pay/getOrderTradeList?' + param
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.shop_id = item.id
		},
		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.s_area_arr = arr
			} else {
				this.s_area_arr = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		},
		setValue(arrVal) {
			this.agent_id = arrVal.agent_id

			this.cityList = arrVal.city_list
			this.city_val = this.cityList[0].id + '|' + this.cityList[0].name
			this.city_name = this.cityList[0].name
			this.city_id = this.cityList[0].id
			this.shop_name = ''
			this.shop_id = ''

			this.fetchAreaList() //商圈列表
			this.listUser() //店铺列表
		}
	}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
.main_user {
	background: var(--zfy-red);
	color: #fff;
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.row-info {
	padding: 10px 0;
}
.auditCentent {
	width: 90%;
	margin: 0 auto;
}

.auditCentent button {
	width: 82px;
}

.timeline {
	height: 30px;
	line-height: 30px;
	margin-bottom: 20px;
}

.timeline span {
	margin-left: 10px;
}
</style>



// WEBPACK FOOTER //
// src/components/billshop/OrderTradeList.vue